<template>
	<section>
		<el-col :span="24" class="box">
			<el-col :span="24" class="box-header">办事员列表</el-col>
				<!--工具条-->
				<el-col :span="24" class="toolbar">
					<el-form :inline="true">
						<el-form-item>
							<el-button type="warning" @click="fnOpenClerk">新增办事员</el-button>
						</el-form-item>
						<el-form-item>
							<el-button @click="emitGoBack">返回</el-button>
						</el-form-item>
						<el-form-item class="sort">
							<el-button type="info" @click="fnSaveSolt" :disabled="hasSolt">保存排序</el-button>
						</el-form-item>
					</el-form>
				</el-col>
		
				<!--办事员列表-->
				<el-table :data="clerks" border v-loading="clerksLoading" class="clerk-list m-l-3">
					<el-table-column label="姓名" width="435">
						<template scope="scope">
							<p class="update-leader" @click="fnOpenAddLeader(scope.row.EmpID,scope.row.EmpName)">{{scope.row.EmpName}} - {{scope.row.EmpID}}</p>
						</template>
					</el-table-column>
					<el-table-column prop="Title" label="职务" width="446">
					</el-table-column>
					<el-table-column label="操作" width="130">
						<template scope="scope">
						    <i class="el-icon-custom-upward sort-icon" @click="fnSortUpward(scope.$index)"></i>
						    <i class="el-icon-custom-down sort-icon" @click="fnSortDown(scope.$index)"></i>
						    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
						      	<el-button type="danger" size="mini" icon="custom-delete"  @click="fnDelete(scope.row.ID)"></el-button>
						    </el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				
				<!--新增办事员-->
				<el-dialog title="新增办事员" v-model="addFormVisible" :close-on-click-modal="false" class="add-dialog">
					<el-form :model="addForm" label-width="100px" :rules="addFormRules" ref="addForm">
						<el-form-item label="部门">
							<el-select v-model="addForm.dept" placeholder="请选择" style="width: 42%;" @change="fnChangeDept">
								<el-option v-for="item in depts" :key="item.ORGANIZATION_ID" :label="item.ORGANIZATION_NAME" :value="item.ORGANIZATION_ID"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="人员">
							<el-select v-model="addForm.account" placeholder="请选择" style="width: 42%;">
								<el-option v-for="item in staffs" :key="item.USER_ACCOUNT" :label="item.USER_NAME" :value="item.USER_ACCOUNT">
									<span style="float: left">{{ item.USER_NAME }}</span>
									<span style="float: right; color: #8492a6; font-size: 13px">{{ item.USER_ACCOUNT }}</span>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="职务">
							<el-col :span="10">
								<el-input v-model="addForm.title" placeholder="请输入主办或协办"></el-input>
							</el-col>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click.native="addFormVisible = false">取消</el-button>
						<el-button type="primary" @click.native="fnAddClerk">提交</el-button>
					</div>
				</el-dialog>
			</el-col>
	</section>
</template>

<script>
	import Svc from '../../service/index.js'
	import moment from 'moment'
	import Vue from 'vue'
	export default {
		props:['svg-dept-id'],
		data() {
			return {
				clerksLoading : false,
				clerks :[],
				hasSolt : true,
				//新增内容
				addForm : {
					dept : '',
					account :'',
					title : ''
				},
				addFormVisible : false,
				//新增验证
				addFormRules : {},
				depts : [], //所有部门
				staffs : [] //当前部门下的员工
			}
		},
		methods: {
			//自定义事件->返回
			emitGoBack(){
				this.$emit('go-back','list')
			},
			//显示message提示框
            openMessage : function(msg,type){
    	        this.$message({
		          	showClose: true,
		          	message: msg,
		          	type: type
		        });
		    },
		    //排序 -> 上移
		    fnSortUpward(index){
		    	var that = this
		    	if (index != 0) {
		    		var oldValue = that.clerks[index]
		    		var newValue = that.clerks[index-1]
		    		Vue.set(that.clerks, index, newValue)
		    		Vue.set(that.clerks, index-1, oldValue)
		    		that.hasSolt = false
		    	}
		    },
		    //排序 -> 下移
		    fnSortDown(index){
		    	var that = this
		    	if (index != that.clerks.length - 1) {
		    		var oldValue = that.clerks[index]
		    		var newValue = that.clerks[index+1]
		    		Vue.set(that.clerks, index, newValue)
		    		Vue.set(that.clerks, index+1, oldValue)
		    		that.hasSolt = false
		    	}
		    },
		    //保存排序
		    fnSaveSolt(){
		    	var that = this
		    	var clerkIds = []
		    	for (var i=0;i<that.clerks.length;i++) {
		    		clerkIds.push(parseInt(that.clerks[i].ID))
		    	}
		    	
		    	Svc.fnPostData('/api/guide/officer/adjust',{IDs : clerkIds},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.hasSolt = true
	            		that.openMessage("新顺序保存成功！",'success')
	            	} else {
	            		that.openMessage("新顺序保存失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //获取办事人
		    fnGetClerks(){
		    	var that = this
	            Svc.fnGetData('/api/guide/officer/fetch/'+that.svgDeptId,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.clerks = res.body.Data
	            	} else {
	            		that.openMessage("办事人获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //获取所有部门信息
		    fnGetDepts(){
		    	var that = this
	            Svc.fnGetData('/api/account/alldepts',{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.depts = res.body.Data
	            	} else {
	            		that.openMessage("部门信息获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //选择部门
		    fnChangeDept(val){
		    	var that = this
		    	that.fnGetStaffs()
		    },
		    //获取当前部门的员工
		    fnGetStaffs(){
		    	var that = this
	            Svc.fnGetData('/api/account/deptuser/'+that.addForm.dept,{},function(res){
	            	if (res.body.ErrCode == 0){
	            		that.staffs = res.body.Data
	            	} else {
	            		that.openMessage("当前部门的员工信息获取失败！",'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
	     	//打开新增办事员页面
		    fnOpenClerk(){
		    	var that = this
		    	that.addFormVisible = true
		    },
	      	//新增办事员
	      	fnAddClerk(){
	      		var that = this
		    	var params = {
		    		ItemID : that.svgDeptId,
		    		EmpID : that.addForm.account,
					EmpName : '',
					Title : that.addForm.title,
		    	}
		    	//获取办事员姓名
		    	for (var i=0;i<that.staffs.length;i++) {
		    		var item = that.staffs[i]
		    		if (item.USER_ACCOUNT == that.addForm.account) {
		    			params.EmpName = item.USER_NAME
		    			break
		    		}
		    	}
		    	
	            Svc.fnPostData('/api/guide/officer/add',params,function(res){
	            	if (res.body.ErrCode == 0){
	            		that.addFormVisible = false
	            		that.fnGetClerks()
	            	} else {
	            		that.openMessage("新增办事员失败！" + res.body.ErrMsg,'error')
	            	}
	            },function(res){
	            	that.openMessage("网络错误，请重新！",'error')
	            })
		    },
		    //删除
		    fnDelete(id){
		    	var that = this
		    	that.$confirm('您确认删除该办事员吗？', '提示', {
					type: 'warning'
				}).then(function(){
					Svc.fnPostData('/api/guide/officer/remove',{ID:id},function(res){
		            	if (res.body.ErrCode == 0){
		            		that.openMessage("删除操作成功！",'success')
		            		that.fnGetClerks()
		            	} else {
		            		that.openMessage("删除操作失败！",'error')
		            	}
		            },function(res){
		            	that.openMessage("网络错误，请重新！",'error')
		            })
				})
		    }
		},
		mounted() {
			//获取办事人
		    this.fnGetClerks()
		    //获取所有部门信息
		    this.fnGetDepts()
		}
	}
</script>

<style scoped>
	.m-l-3{
		margin-left: 3%;
	}
	.box {
		background-color: #fff;
   		box-sizing: border-box;
   		background: #fff;
    	border: 1px solid #d1dbe5;
	    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
		margin-top: 20px;
	}

	.box-header{
		background-color: #eef1f6;
	    border-bottom: 1px solid #d1dbe5;
	    padding: 10px;
	    margin-bottom: 24px;
	    font-size: 15px;
	    color: #48576a;
	}
	
	.clerk-list{
		width: 94%;
		margin-bottom:30px;
	}
	
	.toolbar {
		width: 94%;
		height: 56px;
	    background: #f2f2f2;
	    padding: 10px 10px 0 10px;
	    margin: 10px 0 20px 3%;
	}
	
	.sort{
		position: absolute;
		right: 5%;
	}
	
	.sort-icon{
	    font-size: 23px;
	    margin-right: 6px;
	    margin-top: 3px;
	    cursor: pointer;
	}
</style>